<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片2.0</title>
    <!--<link rel="shortcut icon" href="https://onedrive.gimhoy.com/1drv/aHR0cHM6Ly8xZHJ2Lm1zL3UvcyFBbF9mWWFlZkxna0xpVFFQUmpudmhrZ09UOTB0.png" >-->
    <link rel="stylesheet" href="../../public/lib/bs/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../public/lib/bs/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="style/2.0.css">

    <script src="../../public/lib/jquery-3.2.1.js"></script>
    <script src="../../public/lib/vue.min.js"></script>
    <script src="../../public/util/ajax-util.js"></script>
    <script src="../../public/lib/bs/js/bootstrap.min.js"></script>
</head>
<body>


    <!--图片显示Begin-->
    <div id="wallpaper">
        <!--图片搜索Begin-->
        <div id="search">
            <section class="search-box">
                <div class="title">
                    <p>A Free Photo Web</p>
                    <p>You Can Free Download</p>
                </div>
                <div class="form-group form-inline">
                    <input type="text" class="form-control" id="search-text" placeholder="You can Input key world">
                    <button type="button" class="btn btn-primary btn-lg" id="search-btn" @click="GetImage">Serch</button>
                </div>
            </section>
        </div>
        <!--图片搜索End-->
        <div class="container" id="view-box">
            <div class="col">
                <div class="pic" v-for="img in IMG_DATA">
                    <a :href="img.urls.raw" class="raw">查看原图</a>
                    <img :src="img.urls.small" alt="">
                    <p>{{img.description}}</p>
                </div>
            </div>
        </div>
    </div>
    <!--图片显示End-->

    <script src="script/photo.js"></script>
</body>
</html>